<template>
  <div class="power">
    <Card>
      <div class="top">
        <div class="device_name">
          <img src="" alt="" />
          <span class="power_title">智能电源-{{ info.name }}</span>
        </div>
      </div>
      <div class="info">
        <Row style="margin: 20px 0">
          <Col span="6">
            <span>设备型号：</span><span>{{ info.type }}</span>
          </Col>
          <Col span="6"
            ><span>设备状态：</span
            ><span>{{ powerOnlineTypeEnum[info.inline]?.text }}</span></Col
          >
          <Col span="6">
            <span>软件版本：</span><span>{{ info.version }}</span>
          </Col>
          <Col span="6">
            <span>硬件版本：</span><span>{{ info.hardwareVersion }}</span>
          </Col>
        </Row>
      </div>
    </Card>
    <Card style="margin-top: 25px">
      <div class="content-wrap">
        <div class="power_title label">远程控制</div>
        <div class="title">
          <span>电源工作模式</span>
        </div>
        <div style="padding: 0 15px 15px">
          <span>电源工作模式</span>
          <RadioGroup
            v-model:value="config"
            @change="(e) => onConfigPower(config)"
          >
            <RadioButton value="0">关闭</RadioButton>
            <RadioButton value="1">开启</RadioButton>
            <RadioButton value="2">定时</RadioButton>
          </RadioGroup>
          <div class="timing_list">
            <Row>
              <Col :span="8" v-for="(item, index) in timingList" :key="index">
                <div class="timing">
                  <div>电源定时{{ index + 1 }}</div>
                  <div class="timing_info">
                    <TimeRangePicker
                      v-model:value="timingList[index]"
                      valueFormat="HH:mm"
                      format="HH:mm"
                      @change="(e) => onChangeTime(e, index)"
                    ></TimeRangePicker>
                    <Button type="primary" @click="onConfirm(item, index)"
                      >确定</Button
                    >
                  </div>
                </div>
              </Col>
            </Row>
          </div>
        </div>
        <div class="power_title label">数据映射</div>
        <div class="title">基本参数</div>
        <Row style="margin: 20px 0">
          <Col span="8">
            <span>信号质量：</span
            ><span v-if="powerInfo.Signal"
              >{{ powerInfo.Signal }}{{ powerInfo.SignalUnit }}</span
            >
          </Col>
          <Col span="8">
            <span>输出短路状态：</span><span>{{ powerInfo.SHORT_OUTS }}</span>
          </Col>
          <Col span="8">
            <span>剩余电量：</span
            ><span v-if="powerInfo.Surplus">{{ powerInfo.Surplus }}%</span>
          </Col>
        </Row>
        <div class="title">功率参数</div>
        <Row style="margin: 20px 0">
          <Col span="8">
            <span>充电功率：</span
            ><span v-if="powerInfo.Pv_W"
              >{{ powerInfo.Pv_W }}{{ powerInfo.Pv_WUnit }}</span
            >
          </Col>
          <Col span="8">
            <span>负载功率：</span
            ><span v-if="powerInfo.Load_W"
              >{{ powerInfo.Load_W }}{{ powerInfo.Load_WUnit }}</span
            >
          </Col>
        </Row>
        <div class="title">电压参数</div>
        <Row style="margin: 20px 0">
          <Col span="8">
            <span>基准电压：</span
            ><span v-if="powerInfo.V_basic"
              >{{ powerInfo.V_basic }}{{ powerInfo.V_basicUnit }}</span
            >
          </Col>
          <Col span="8">
            <span>光伏电压：</span
            ><span v-if="powerInfo.V_power"
              >{{ powerInfo.V_power }}{{ powerInfo.V_powerUnit }}</span
            >
          </Col>
          <Col span="8">
            <span>电池电压：</span
            ><span v-if="powerInfo.V_bat"
              >{{ powerInfo.V_bat }}{{ powerInfo.V_batUnit }}</span
            >
          </Col>
        </Row>
        <div class="title">电流参数</div>
        <Row style="margin: 20px 0">
          <Col span="8">
            <span>输出电流：</span
            ><span v-if="powerInfo.I_output"
              >{{ powerInfo.I_output }}{{ powerInfo.I_outputUnit }}</span
            >
          </Col>
          <Col span="8">
            <span>电池充电电流：</span
            ><span v-if="powerInfo.I_charge"
              >{{ powerInfo.I_charge }}{{ powerInfo.I_chargeUnit }}</span
            >
          </Col>
        </Row>
        <div class="title">环境温度参数</div>
        <Row style="margin: 20px 0">
          <Col span="8">
            <span>电池环境温度：</span
            ><span v-if="powerInfo.T_bat"
              >{{ powerInfo.T_bat }}{{ powerInfo.T_batUnit }}</span
            >
          </Col>
          <Col span="8">
            <span>内部温度：</span
            ><span v-if="powerInfo.T_inside"
              >{{ powerInfo.T_inside }}{{ powerInfo.T_insideUnit }}</span
            >
          </Col>
          <Col span="8">
            <span>高温保护温度：</span
            ><span v-if="powerInfo.top_temp"
              >{{ powerInfo.top_temp }}{{ powerInfo.top_tempUnit }}</span
            >
          </Col>
        </Row>
        <Row style="margin: 20px 0">
          <Col span="8">
            <span>低温保护温度：</span
            ><span v-if="powerInfo.low_temp"
              >{{ powerInfo.low_temp }}{{ powerInfo.low_tempUnit }}</span
            >
          </Col>
        </Row>
        <div class="title">电量参数</div>
        <Row style="margin: 20px 0">
          <Col span="8">
            <span>每日发电量：</span
            ><span v-if="powerInfo.day_energy"
              >{{ powerInfo.day_energy }}{{ powerInfo.day_energyUnit }}</span
            >
          </Col>
          <Col span="8">
            <span>总发电量：</span
            ><span v-if="powerInfo.sum_energy"
              >{{ powerInfo.sum_energy }}{{ powerInfo.sum_energyUnit }}</span
            >
          </Col>
        </Row>
      </div>
    </Card>
  </div>
</template>
<script setup lang="tsx">
import { computed, ref } from 'vue';
import { useDicts } from '@boeyo/portal';
import {
  Button,
  Card,
  Col,
  Modal,
  RadioButton,
  RadioGroup,
  Row,
  TimeRangePicker,
  message,
} from 'ant-design-vue';
import { commandExec, getPowerSupplyDetail } from '../api';

const dictArr = ['power_online_type'];
const { powerOnlineTypeEnum } = useDicts(dictArr);

// 获取远程控制详情
const { powerSupplyId } = history.state;

const info = ref<any>({});
const powerInfo = ref<any>({});
const getDetailList = async () => {
  const res: any = await getPowerSupplyDetail(powerSupplyId);
  info.value = res.data;
  powerInfo.value = info.value?.sensorList?.reduce((prev, cur) => {
    prev[cur.flag] = cur.displayValue;
    prev[`${cur.flag}Unit`] = cur.unit;
    return prev;
  }, {});
};

getDetailList();

const config = computed({
  get: () =>
    powerInfo.value.setPower1Key
      ? JSON.parse(powerInfo.value.setPower1Key).value1
      : '0',
  set: (newValue) => {
    powerInfo.value.setPower1Key = JSON.stringify({
      port: powerInfo.value.setPower1Key.port,
      value1: newValue,
    });
  },
});

// 电源定时列表
const formatPowerTime = (key) => {
  return [
    powerInfo.value[key] ? JSON.parse(powerInfo.value[key]).value1 : '00:00',
    powerInfo.value[key] ? JSON.parse(powerInfo.value[key]).value2 : '00:00',
  ];
};
const timingList = computed(() => {
  const time1 = formatPowerTime('setPower1Time1');
  const time2 = formatPowerTime('setPower1Time2');
  const time3 = formatPowerTime('setPower1Time3');
  const time4 = formatPowerTime('setPower1Time4');
  const time5 = formatPowerTime('setPower1Time5');
  return [time1, time2, time3, time4, time5];
});

// 更改电源定时
const onChangeTime = (time, index) => {
  const [value1, value2] = time;
  powerInfo.value[`setPower1Time${index + 1}`] = JSON.stringify({
    value1,
    value2,
  });
};
// 存储电源定时信息
const onConfirm = async (item, index) => {
  if (item.length === 0) return message.warning('请选择时间');
  const params = {
    cmdFlag: `setPower1Time${index + 1}`,
    deviceId: powerSupplyId,
    params: item,
  };
  Modal.confirm({
    title: `配置电源定时${index + 1}`,
    content: `确定电源定时${index + 1}吗？`,
    okText: '确定',
    cancelText: '取消',
    onOk: async () => {
      await commandExec(params);
      message.success('操作成功');
    },
  });
};

// 配置电源工作模式
const onConfigPower = (val) => {
  const title = val == '0' ? '关闭' : val == '1' ? '开启' : '定时';
  Modal.confirm({
    title: '配置电源工作模式',
    content: `确定${title}电源工作模式吗？`,
    okText: '确定',
    cancelText: '取消',
    onOk: async () => {
      await commandExec({
        cmdFlag: 'setPower1Key',
        deviceId: powerSupplyId,
        params: [config.value],
      });
      message.success('操作成功');
    },
  });
};
</script>

<style lang="scss" scoped>
.power {
  .top {
    display: flex;
    justify-content: space-between;
  }
  .info {
    padding-left: 25px;
  }
  .custom_dom {
    max-height: calc(100vh - 430px);
    padding: 10px;
    overflow-y: auto;
  }
  .power_title {
    font-size: 18px;
    font-weight: 700;
    &.label {
      font-size: 14px;
    }
  }
  .title {
    padding: 15px 10px;
    position: relative;
    display: flex;
    justify-content: space-between;
    &::before {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      content: '';
      width: 5px;
      height: 14px;
      border-radius: 2.5px;
      background-color: #5a9cff;
    }
  }

  .content-wrap {
    padding-right: 15px;
    max-height: calc(100vh - 360px);
    overflow-y: auto;
  }
  :deep(.ant-radio-group) {
    margin-left: 15px;
    .ant-radio-button-wrapper {
      &:first-child {
        border-start-start-radius: 12px;
        border-end-start-radius: 12px;
      }
      &:last-child {
        border-start-end-radius: 12px;
        border-end-end-radius: 12px;
      }
      &-checked {
        background-color: #1677ff;
        color: #fff;
      }
    }
  }
  .timing {
    padding: 15px 0;
    &_info {
      margin-top: 5px;
      button {
        margin-left: 10px;
      }
    }
  }
}
</style>

<route lang="json">
{
  "name": "power-remote-control",
  "requireAuth": false,
  "meta": {
    "title": "智能电源远程监控",
    "requireAuth": false
  }
}
</route>
